<template>
  <div>
    <header id="top"></header>
    <div id="container">
      <div class="login">
        <p>登录</p>
        <div class="text">
          <input
            type="text"
            required
            v-model="uname"
            @input="checkUname"
            placeholder="请输入正确的用户"
          />
          <div :class="{ enable: agree, disable: !agree }">用户名不正确</div>
        </div>
        <div class="text">
          <input
            type="password"
            v-model="password"
            @input="checkPassword"
            maxlength="18"
            minlength="6"
            placeholder="以字母开头,长度在6~18之间"
          />
          <div :class="{ en: ag, dis: !ag }">请核对密码后登陆</div>
        </div>
        <input
          type="text"
          v-model="yzm"
          id="codeinput"
          placeholder="请输入验证码"
        />
        <span id="codeimg"> </span>
        <br /><br />
        <button id="submit" @click="tijiao">提交</button>
        <button type="button" class="btn btn-danger" @click="checkLogin">
          登录
        </button>
        <div>
          还没有账号？<router-link to="/register">点击注册</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getcode();

    this.gettoken();
  },
  methods: {
    checkLogin() {
      if (this.tijiao && this.checkUname && this.checkPassword) {
        // console.log("验证开始，发送登录请求");
        const { uname, password } = this;
        console.log(uname, password);
        const url = "http://localhost:3000/login";
        const params = `username=${uname}&pwd=${password}`;
        console.log(params);
        let config = {
          headers: { authorization: localStorage.getItem("token") },
        };
        this.axios.post(url, params, config).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            alert("验证开始，发送登录请求");
            this.$store.commit("updateuname", this.uname);
            this.$router.push("/");
          } else {
            alert("登录失败");
          }
        });
      }
    },
    tijiao() {
      let config = {
        headers: { authorization: localStorage.getItem("token") },
      };
      let yzm = this.yzm;
      this.axios
        .get(`http://localhost:3000/register?yzm=${yzm}`, config)
        .then((res) => {
          alert(res.data);
        });
    },
    checkUname() {
      console.log(this.uname);
      let exp = /^[\u4e00-\u9fa5]{0,}$/;
      if (!exp.test(this.uname) && this.uname != "") {
        // console.log("fail");
        this.agree = true;
        return;
      } else {
        this.agree = false;
        // console.log("success");
        return;
      }
    },

    checkPassword() {
      console.log(this.password);
      let exp = /^[a-zA-Z]\w{5,17}$/;
      if (exp.test(this.password) && this.password != "") {
        // console.log("succ");
        this.ag = false;
        return;
      } else {
        this.ag = true;
        // console.log("fail");
        return;
      }
    },
    // 请求到token存储token
    gettoken() {
      this.axios.get("http://localhost:3000/gettoken").then((res) => {
        let token = res.data.token;
        localStorage.setItem("token", token);
        // console.log(res.data);
        this.getcode();
      });
    },

    // 获取验证码
    getcode() {
      let config = {
        headers: { authorization: localStorage.getItem("token") },
      };
      this.axios.get("http://localhost:3000/getcode", config).then((res) => {
        console.log(res);
        // 将svg图片放入codeimg中
        codeimg.innerHTML = res.data.svg;
      });
    },
  },

  data() {
    return {
      uname: "",
      password: "",
      agree: false,
      ag: false,
      yzm: "",
    };
  },
};
</script>

<style  scoped  src='../assets/css/06_denglu2.css'>
</style>
<style >
.enable,
.en {
  color: red;
  font-size: 18px;
  font-weight: 600;
  margin-right: -180px;
  margin-top: -60px;
  display: block;
}
.en {
  margin-right: -180px;
  /* margin-top: -60px; */
}
.disable,
.dis {
  color: red;
  display: none;
}
</style>